// reactive 和 shallowReactive ,深的响应和浅的响应



// 定义reactive的处理对象
const reactiveHandler = {
    get(target, props) {
        const result = Reflect.get(target, props)
        console.log("劫持了get操作", target, props);
        return result
    },
    set(target, props, value) {
        const result = Reflect.set(target, props, value)
        console.log("劫持了set操作", target, props, value);
        return result
    },
    deleteProperty(target, props) {
        const result = Reflect.deleteProperty(target, props)
        console.log("劫持了del操作", target, props);
        return result
    }
}



// 定义一个reactive函数
function reactive(target) {

    // 如果目标对象是对象
    if (target && typeof target == "object") {

        // 要深度影响,给目标对象所有代理
        if (Array.isArray(target)) {
            target.forEach((item, index) => {
                // 要递归判断,如果是数组,还要使用递归处理
                target[index] = reactive(item)
            })
        } else {

            console.log("ccc");
            Object.keys(item => {
                target[item] = reactive(item)
            })

        }
       
        // 是对象类型,那么就需要使用代理对象进行处理
        return new Proxy(target, reactiveHandler)

    }

    // 如果是普通的数据,直接返回
    return target
}

function shallowReactive(target) {
    if (target && typeof target == "object") {

        // // 要深度影响,给目标对象所有代理
        // if (Array.isArray(target)) {
        //     target.forEach((item, index) => {
        //         // 要递归判断,如果是数组,还要使用递归处理
        //         target[index] = reactive(item)
        //     })
        // } else {
        //     Object.keys(item => {
        //         target[item] = reactive(item)
        //     })

        // }
        // 是对象类型,那么就需要使用代理对象进行处理
        return new Proxy(target, reactiveHandler)

    }

    // 如果是普通的数据,直接返回
    return target

}